<template>
  <div class="dashboard-container">
    <el-row style="height: 100%;" :gutter="5">
      <el-col
        v-for="item in inputs"
        :key="item.id.value"
        :span="item.span.value"
      >
        <component :is="item.components.value" :model="item"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDefaultSysPortal } from '@/api/sysPortal'
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'

export default {
  name: 'Dashboard',
  data() {
    return {
      inputs: [],
      driver: ''
    }
  },
  mounted() {
    this.handleQuery()
    this.handleStep()
  },
  methods: {
    handleQuery() {
      getDefaultSysPortal().then(res => {
        if (res.code === 20000 && res.data) {
          this.inputs = JSON.parse(res.data.context)
        }
      })
    },
    handleStep() {
      this.driver = new Driver()
      this.driver.defineSteps([
        {
          element: '.navbar',
          popover: {
            className: 'navbar',
            title: '系统提示',
            description: '页面缩放',
            position: 'center'
          }
        },
        {
          element: '.rightBtn',
          popover: {
            className: 'rightBtn',
            title: '系统提示',
            description: '设置自定义的桌面',
            position: 'left'
          }
        }
      ])
      // this.driver.start()
    }
  }
}
</script>

<style scoped>

.dashboard-container {
  padding-right: 5px;
  padding-left: 5px;
}

/deep/ .el-card__header {
  padding: 10px 10px;
  margin-bottom: 0px !important;
}

.el-col {
  margin-top: 2px;
}
</style>
